<template>
  <el-container class="page-wrap">
    <el-header class="page-nav" height="30px">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>密码修改</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main class="page-main">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="旧密码" prop="oldPassword">
              <el-input type="password" v-model.trim="form.oldPassword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="新密码" prop="newPassword">
              <el-input type="password" v-model.trim="form.newPassword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="重复新密码" prop="newAgainPassword">
              <el-input type="password" v-model.trim="form.newAgainPassword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10" class="tx-c">
            <el-button type="primary" class="m-b-20" :disabled="disable" @click="submit()">提交</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-main>
  </el-container>
</template>
<script>
import http from "../../../../assets/js/http";

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.form.newPassword !== "") {
          this.$refs.form.validateField("newPassword");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else {
        var regex = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{8,30}$/;
        if (!regex.test(value)) {
          callback(
            new Error(
              "必须是字母、数字、特殊字符中任意两种组合，且长度在 8 到 30 个字符"
            )
          );
        } else {
          callback();
        }
      }
    };
    var validateAgainPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.newPassword) {
        callback(new Error("两次输入密码不一致！"));
      } else {
        callback();
      }
    };
    return {
      disable: false,
      form: {
        // auth_key: '',
        oldPassword: "",
        newPassword: "",
        newAgainPassword: ""
      },
      rules: {
        oldPassword: [{ validator: validatePass, trigger: "blur" }],
        newPassword: [{ validator: validatePass2, trigger: "blur" }],
        newAgainPassword: [{ validator: validateAgainPass, trigger: "blur" }]
      }
    };
  },
  methods: {
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.disable = !this.disable;
          this.apiPost("user/updatePassword", this.form).then(res => {
            this.handelResponse(
              res,
              data => {
                _g.toastMsg("success", "修改成功");
                Lockr.rm("token");
                Lockr.rm("userInfo");
                // Lockr.rm('sessionId')
                setTimeout(() => {
                  router.replace("/");
                }, 1500);
              },
              () => {
                this.disable = !this.disable;
              }
            );
          });
        }
      });
    }
  },
  created() {
    // this.form.auth_key = axios.defaults.headers.authKey
    _g.closeGlobalLoading();
  },
  mixins: [http]
};
</script>